<!DOCTYPE html>
<html>
<head>
    <title>TransactionList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 所有的 css & js 资源 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
    <script src="../../static/sa.js"></script>
    <style type="text/css">
        /* .data-table .el-table__body-wrapper{min-height: 0px; max-height: 0px;}
        .data-table .el-table__body-wrapper{transition: all 0.3s;} */
    </style>
</head>
<body>
<div class="vue-box" style="display: none;" :style="'display: block;'">
    <div class=c-panel">
        <el-table class="data-table" ref="data-table" :data="dataList" size="small">
            <el-table-column label="userId" prop="userId"  > </el-table-column>
            <el-table-column label="name" prop="name"  > </el-table-column>
            <el-table-column label="type" prop="type" ></el-table-column>
            <el-table-column label="balance" prop="balance" ></el-table-column>
        </el-table>
    </div>
</div>
<script>
    var mockData = {
        code: 200,
        msg: 'ok',
        data:[
            {
                "userId": 11111111111,
                "balance": 5391.46,
                "type": 1,
                "email": "r.khrdrvbpf@mqpj.kz",
                "password": "fphyuzdegdqi",
                "name": "谢艳",
                "description": "已且温但斯系置层传身最单队克。还重参起很能多较广系回政。上较教严真知八争论二交家数。心持由龙议才取把至属真里民术据形。们达维想亲路选进参常为并斯。",
                "logoPath": "http://speezh.com.cn/nnlb",
                "legalRequest": false,
                "username": "唐敏",
                "tokenName": "广立合克",
                "tokenValue": "incididunt reprehenderit dolore sint proident"
            }
        ]
    }
    var app = new Vue({
        el: '.vue-box',
        data: {
            sa: sa,
            p: { // 查询参数
                id: '',
                title: '',
                sortType: 0,
                pageNo: 1,
                pageSize: 10,
            },
            dataCount: 0,	// 数据总数
            dataList: [] // 数据集合
        },
        methods: {
            // 数据刷新
            f5: function() {
                // TODO: 获取数据
                sa.ajax2('/VocArticle/getList', this.p, function(res){
                    this.dataList = res.data;	// 数据
                    this.dataCount = res.dataCount;		// 分页
                    sa.f5TableHeight();		// 刷新表格高度
                }.bind(this), {res: mockData});
            }
        },
        created: function() {
            this.f5();
            sa.onInputEnter();		// 监听输入框的回车事件，执行查询
        }
    })
</script>
</body>
</html>
